<template>
  <div class="spread-activity">
    <em-card
      class="spread-activity-card"
      no-border
      :background="background"
      :roundless="roundless"
    >
      <template slot="header">
        <div
          v-if="headerOptions.thumb"
          class="spread-activity-header"
        >
          <em-image :src="headerOptions.thumb" />
        </div>
        <div
          v-else
          class="spread-activity-header"
        >
          <h4 class="spread-activity-header__title">{{ headerOptions.title }}</h4>
          <div class="spread-activity-header__desc">{{ headerOptions.description }}</div>
        </div>
      </template>
      <div class="goods-list">
        <em-goods-block
          v-for="(goods,index) in items"
          :key="index"
          :thumb="goods.thumb"
          :title="goods.title"
          :thumb-ratio="thumbRatio"
          title-inner
          :show-title="false"
          centered
        />
      </div>
    </em-card>
  </div>
</template>

<script>
import { backgroundImage } from '@/utils/styles'
export default {
  name: 'SpreadActivity',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      header: {
        title: '主题活动',
        description: '主题活动',
        thumb: 'http://attach.localhost.com/mall/activity-1212.jpg',
        tag: '全民口碑'
      }
    }
  },
  computed: {
    time() {
      if (this.options && this.options.time) {
        return this.options.time
      }
      return 30 * 60 * 60 * 1000
    },
    options: {
      get() {
        return this.value
      },
      set(v) {
        this.value = v
      }
    },
    styles() {
      if (this.options && this.options.styles) {
        return this.options.styles
      }
      return null
    },
    headerOptions() {
      if (this.options && this.options.header) {
        return this.options.header
      }
      return this.header
    },
    setting() {
      if (this.options && this.options.setting) {
        return this.options.setting
      }
      return null
    },
    roundless() {
      if (this.styles && this.styles.radius) {
        return false
      }
      return true
    },
    background() {
      return backgroundImage(this.styles && this.styles.background)
    },
    columnSize() {
      if (this.setting && this.setting.cols) {
        return this.setting.cols
      }
      return 3
    },
    thumbRatio() {
      if (this.styles) {
        if (this.styles.ratio) {
          return this.styles.ratio
        }
        var width = this.styles.width || 750
        var height = this.styles.height || 0
        if (!/^\d+$/.test(height)) {
          height = Number(height.replace(/[^0-9]/gi, ''))
        }
        if (height > 0) {
          return width / height
        }
      }
      return 5 / 4
    },
    items() {
      var items = []
      if (this.options && this.options.items) {
        items = this.options.items
      }
      return items.concat(
        new Array(this.columnSize - items.length).fill({
          thumb: 'https://multi.niuteam.cn/public/static/ext/diyview/img/crack_figure.png',
          title: '商品名称',
          originPrice: '139.00',
          price: '99.00'
        })
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.spread-activity {
  padding: 0 10px;
  &-card {
    background-size: 100% auto;
    background-position: left top;
    background-repeat: no-repeat;

    .em-card__header {
      padding: 0;
      min-height: initial;
    }
    .em-card__body {
      padding: 0 5px;
    }
  }
  &-header {
    border-radius: inherit;
    overflow: hidden;
    text-align: center;
    flex: 1;
    font-size: 0;
    &__title {
      margin: 0;
      padding: 10px 0 0;
    }
    &__desc {
      margin-top: 5px;
      opacity: 0.6;
      font-size: 12px;
      line-height: 1;
    }
  }
  .goods-list {
    display: flex;
    > * {
      flex: 1;
      padding: 10px 5px;
    }
  }
}
</style>
